In the previous two Electron.js blogs>> >building an Electron app from scratch and>> >creating a web app with React, we have created a very basic website that does not look impressive. In the last two blogs, we have created a basic website but what about UI widgets and design? 

                                                 Source:>> >medium.com

This blog will teach us how to create a fully functional Electron.js application using a set of UI widgets and layout conventions. You have two options: either use HTML5, which offers a multitude of tools, or experiment with a new toolkit like >Semantic UI, which will speed up the design process and add eye-catching features to your application. 

We'll use >Honeycomb, a web implementation of Redgate's design toolkit, as an example here. These are a collection of SASS files used by the Honeycomb web toolkit. Similar to CSS, but with more sophisticated features, SASS is also used for styling. 

To pull SASS files from the repository use npm, after which we will use webpack to turn these SASS files into CSS. Electron browser can easily read these CSS files. In this Electron.js tutorial you will learn to style your application. 

Steps to integrate SASS into the build

To incorporate SASS into the build and consumption UI toolkit, follow these steps. 

Step 1: Install npm module

Before everything works, there are a few npm modules that need to be installed. To install npm modules, use this code. 

And lastly, we need to get the actual web toolkit itself:

Now, here we are getting a node module from the>> >GitHub repository.

Step 2: Configure modules in webpack

It is now necessary to configure each downloaded module in Webpack after the module has been installed. For Webpack to handle.scss files, we need one rule. 

We just have one more piece of setting to do: inform postcss-loader to run autoprefixer as part of its build step. We create a separate postcss.config.js file alongside the webpack configuration:

Step 3: Honeycomb sass variable for paths

One issue with the Honeycomb variables is that when we try to reference the style from the outside, honeycomb.scss references these variables with paths that don't function. By setting up webpack/sass to resolve the path, you can fix this. As stated below, Honeycomb offers sass variables that assist us in providing the right paths.   

Step 4: Wrap these styles in React components

It's time to complete the style integration in the React component after you've done so successfully.

Now, you can compose this together in UI:

The final result would be as shown below. It is something better than the output shown at the start. 

                                                       Source:>> >medium.com

Use the above steps and give your Electron application some style and function.